<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.js"
      type="application/javascript"
    ></script>
  </head>
  <body>
    <div id="app">
      <div>
        <div>已选房间</div>
        <div class="box" v-for="item of selecRoom">{{item.name}}</div>
      </div>
      <div>
        <div>可选房间</div>
        <div class="box" v-for="(item,index) of allroom" @click="fn1(index)">{{item.name}}</div>
      </div>
    </div>
    <script>
      const { ref, reactive } = Vue;
      const app = Vue.createApp({
        setup() {
          const allroom = ref([
            { id: 1, name: '房间1' },
            { id: 2, name: '房间2' },
            { id: 3, name: '房间3' },
          ]);
          const selecRoom = ref([]);

          const fn1 = (index) => {
            const one = allroom.value.splice(index, 1);
            if (one.length > 0) {
              selecRoom.value.push(one[0]);
            }
          };
          return {
            allroom,
            selecRoom,
            fn1,
          };
        },
      }); // vue3当中使用createApp方法来创建应用实例  vue2.x  new Vue({})
      app.mount('#app'); // vue3当中很多 挂载方法 从$mount 改成 mount
    </script>

    <style>
      .box {
        width: 150px;
        line-height: 40px;
        border: 1px solid #000;
        margin-right: 20px;
      }
    </style>
  </body>
</html>
